<template>
  <h2>MPopupBase 消息提示框</h2>

  <h2>MPopupBase 属性</h2>
  <table-info type="props" :data="propsTable"></table-info>
  <h2>MPopupBase 插槽</h2>
  <table-info type="slot" :data="slotTable"></table-info>
  <h2>MPopupBase 事件</h2>
  <table-info type="event" :data="eventTable"></table-info>
  <h3>案例</h3>
  <code-demo-mobile :code="htmlCode" :scriptCode="scriptCode">
    <van-icon name="question" color="#7697E3" @click="visible = true" />
    <m-popup-base title="风险等级" :visible="visible" @close="visible = false">
      风险等级由A-E，代表更具当前数据样本该企业在未来可能出现风险的概率。
    </m-popup-base>
  </code-demo-mobile>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const htmlCode = `<van-icon name="question" color="#7697E3" @click="visible = true" />
<m-popup-base title="风险等级" :visible="visible" @close="visible = false">
  风险等级由A-E，代表更具当前数据样本该企业在未来可能出现风险的概率。
</m-popup-base>`

const scriptCode = `const visible = ref(false)`

const propsTable = [
  { name: 'visible', desc: '显示状态', type: 'boolean', default: 'false' },
  { name: 'title', desc: '标题', type: 'string' },
  { name: 'showHead', desc: '是否显示标题', type: 'boolean', default: 'true' },
]

const slotTable = [
  {
    name: 'head',
    desc: '头部插槽，会覆盖title属性',
  },
  {
    name: 'default',
    desc: '内容区插槽',
  },
]

const eventTable = [{ name: 'close', desc: '关闭时触发', type: 'function' }]
</script>
